<script lang="ts" setup>
import { Document, Cpu, Setting, DocumentAdd } from "@element-plus/icons-vue";
import { debounce } from "lodash";
import { routes } from "@/plugins/router";

// 响应式变量
const countClick = ref(0);
const debugWinF = ref(false);

interface myWinDef {
  name: string;
  cnName: string;
  path: string;
}

let timer = null;
const masterWin = routes.find((item) => item.name === "MasterWin");
const enterpriseWin = routes.find((item) => item.name === "EnterpriseWin");
const debugWin = routes.find((item) => item.name === "DebugWin");
const toolsWins = routes.find((item) => item.name === "tools")?.children;

const handleOpen = (key: string, keyPath: string[]) => {
  // console.log(key, keyPath)
};
const handleClose = (key: string, keyPath: string[]) => {
  // console.log(key, keyPath)
};

const configClick = () => {
  countClick.value++;
  if (countClick.value === 10) {
    debugWinF.value = true;
    countClick.value = 0;
  } else {
    handleQuickClick();
  }
};

// 连续点击的等待间隔300ms, 300内点击10次启动
const handleQuickClick = debounce(() => {
  countClick.value = 0;
}, 300);

onUnmounted(() => {
  if (timer) {
    clearTimeout(timer);
  }
});
</script>

<template>
  <div class="BL-body">
    <el-row class="menuContainer">
      <el-col>
        <el-header class="mb-2"
          ><el-text class="mb-2 h5" size="large">功能</el-text></el-header
        >
        <el-menu
          active-text-color="#ffd04b"
          default-active="2"
          background-color="#545c64"
          class="tac"
          text-color="#fff"
          @open="handleOpen"
          @close="handleClose"
          router
        >
          <el-menu-item
            :index="masterWin?.name"
            :route="{ path: masterWin?.path ?? '' }"
          >
            <el-icon>
              <document />
            </el-icon>
            <span>{{ masterWin?.cnName }}</span>
          </el-menu-item>

          <el-menu-item
            :index="enterpriseWin?.name"
            :route="{ path: enterpriseWin?.path ?? '' }"
          >
            <el-icon>
              <document-add />
            </el-icon>
            <span>{{ enterpriseWin?.cnName }}</span>
          </el-menu-item>

          <el-sub-menu index="tools">
            <template #title>
              <el-icon><Cpu /></el-icon>
              <span>工具</span>
            </template>
            <el-menu-item
              v-for="item in toolsWins"
              :index="item.name"
              :route="{ path: item.path }"
            >
              {{ (item as myWinDef).cnName }}
            </el-menu-item>
            <el-menu-item
              v-if="debugWinF"
              :index="debugWin?.name"
              :route="{ path: debugWin?.path ?? '' }"
            >
              {{ debugWin?.cnName }}</el-menu-item
            >
          </el-sub-menu>

          <el-menu-item index="config" @click="configClick">
            <el-icon>
              <setting />
            </el-icon>
            <span>Config</span>
          </el-menu-item>
        </el-menu>
      </el-col>
    </el-row>
  </div>
</template>

<style scoped>
.BL-body {
  display: flex;
  justify-content: center;
  align-items: center;
}

.menuContainer {
  width: 100%;
}

.mb-2 {
  display: flex;
  border-radius: 4px 4px 0 0;
  height: 50px;
  align-items: center;
  box-shadow: 0 21px 0px 0 rgba(0, 0, 0, 1);
  background-color: #545c64;
}

.mb-2 .h5 {
  font-size: 28px;
  color: black;
}

.tac {
  /*display: flex;*/
  justify-content: center;
  align-items: center;
  width: 100%;
  /*左上,右上,右下,左下*/
  border-radius: 0 0 0 32px;
  margin-bottom: 40px;
  border: 2px solid var(--el-card-border-color);
  box-shadow: 0px 0px 15px rgba(0, 0, 0, 0.6);
}
</style>
